<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>css3动画</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
</head>
<style>
.box{
    width:100px;height:100px;background: #2a6496;
    margin:2px;
}
.box1{
    animation: first 5s;/** 名称 播放一次需要秒 **/
    animation-iteration-count:10/** 播放10次 **/
}
.box2{
    animation-name: second;
    animation-duration:3s;/**  播放一次需要秒 **/
    animation-timing-function: ease-in;
}
.box3{
    animation-name: third;
    animation-duration:3s;/**  播放一次需要秒 **/
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;/** 规定对象动画时间之外的状态。**/
}
.box4:hover{
    animation: third 5s;/** 名称 播放一次需要秒 **/
}
@keyframes first{
    from {background:yellow}
    to {background:blue}
}
@-webkit-keyframes first { /* Safari 和 Chrome */
    from {background: yellow;}
    to {background: blue;}
}
@keyframes second {
    form {width:100px;}
    to {width:100%;}
}
@keyframes third {
    0% {background: #2a6496;width:10%;}
    50% {background: #2aabd2;width:40%;}
    100% {background: #2b542c;width:100%;}
}
</style>
<body>
<h2>CSS3动画</h2><h5>如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。</h5>
<div class="panel panel-primary">
    <div class="panel-heading">鼠标经过时触发</div>
    <div class="panel-body">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
    </div>
    <div class="panel-footer">
        <table class="dataintable">
            <tbody>
            <tr>
                <td><a href="/cssref/pr_keyframes.asp" title="CSS3 @keyframes 规则">@keyframes</a></td><td>规定动画。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation.asp" title="CSS3 animation 属性">animation</a></td><td>所有动画属性的简写属性，除了 animation-play-state 属性。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-name.asp" title="CSS3 animation-name 属性">animation-name</a></td><td>规定 @keyframes 动画的名称。</td>
            </tr>
            <tr>
                <td><a href="/cssref/pr_animation-duration.asp" title="CSS3 animation-duration 属性">animation-duration</a></td><td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-timing-function.asp" title="CSS3 animation-timing-function 属性">animation-timing-function</a></td><td>规定动画的速度曲线。默认是 "ease"。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-delay.asp" title="CSS3 animation-delay 属性">animation-delay</a></td><td>规定动画何时开始。默认是 0。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-iteration-count.asp" title="CSS3 animation-iteration-count 属性">animation-iteration-count</a></td><td>规定动画被播放的次数。默认是 1。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-direction.asp" title="CSS3 animation-direction 属性">animation-direction</a></td><td>规定动画是否在下一周期逆向地播放。默认是 "normal"。</td>
            </tr>

            <tr>
                <td><a href="/cssref/pr_animation-play-state.asp" title="CSS3 animation-play-state 属性">animation-play-state</a></td><td>规定动画是否正在运行或暂停。默认是 "running"。</td>
            </tr>

            <tr>
                <td>animation-fill-mode</td><td>规定对象动画时间之外的状态。</td>
            </tr>
            </tbody></table>
    </div>
</div>
<div class="well">
    <h3>animation-timing-function取值</h3>
    <table class="table table-bordered">
        <tr>
            <td>linear</td><td>动画从头到尾的速度是相同的。</td>
        </tr>
        <tr>
            <td>ease</td><td>默认，动画以低速开始，然后加快，在结束前变慢</td>
        </tr>
        <tr>
            <td>ease-in</td><td>动画以低速开始</td>
        </tr>
        <tr>
            <td>ease-out</td><td>动画以低速结束</td>
        </tr>
        <tr>
            <td>ease-in-out</td><td>动画以低速开始和结束</td>
        </tr>
        <tr>
            <td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td>
        </tr>
    </table>
</div>
<div class="well">
    <h3>animation-fill-mode</h3>
    <table class="table table-bordered">
        <tbody><tr>
            <th style="width:15%;">值</th>
            <th>描述</th>
        </tr>

        <tr>
            <td>none</td>
            <td>不改变默认行为。</td>
        </tr>

        <tr>
            <td>forwards</td>
            <td>当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。</td>
        </tr>

        <tr>
            <td>backwards</td>
            <td>在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。</td>
        </tr>

        <tr>
            <td>both</td>
            <td>向前和向后填充模式都被应用。</td>
        </tr>

        </tbody></table>
</div>
</body>
</html>